<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //通过id属性来查询节点，返回匹配的第一个节点
        //a为一个DOM对象
        function cx() {
               a= document.getElementById('abc');
               console.log(a);
               console.log(typeof a);


        //     } 

        //     通过name属性来查询，返回所有匹配的节点集合   //nodelist为节点集合  //可以通过索引获取集合中的某个元素
        //        a= document.getElementsByName('hobby');
        //        console.log(a);


        //     通过标签名来查询，返回所有的匹配节点集合
        //     var a = document.getElementsByTagName('div')   
        //     console.log(a);


        //     通过calss属性来查询，返回所有匹配的节点集合
        //     var a = document.getElementsByClassName('js')
        //     console.log(a);


        //     根据css选择器来查询，返回匹配的第一个节点
        //     var a = document.querySelector('span.js')
        //     console.log(a);


        //     在当前节点内部根据标签名来查询
        //     var a = document.getElementById('abc');
        //     var b = a.getElementsByTagName('li');
        //     console.log(b);



        //     --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
        //     查询当前节点的父节点    .parentNode属性
        //     var a = document.getElementById('lis');
        //     console.log(a.parentNode.parentNode);

        //     元素子节点：children;
        //     console.log(a.parentNode.children);

            // 第一个元素子节点：firstElementchild；
            console.log(a.firstElementChild);
            
        //     最后一个元素子节点：lastElementchild；
          
        //     前一个兄弟节点：previousElementSibling;
        //     console.log(a.previousElementSibling);
        //     console.log(a.parentNode.parentNode.previousElementSibling);

        //     后一个兄弟节点：nextElementSlibing
        //     console.log(a.parentNode.nextElementSibling);
            
            
            
            

        }
    </script>
</head>

<body>
    <button onclick="cx();">查询页面中的元素</button>

    <hr>
    <span class="js">我很好</span>
    <p class="js">大家好</p>
    <div id="d1">第一个</div>
    <div id="d2">第二个</div>

    <div class="js">第三个</div>
    <div class="js">
        <span class="js">div中的span</span>
    </div>

    爱好：<input type="checkbox" name="hobby" value="">吃饭
    <input type="checkbox" name="hobby" value="">睡觉
    <input type="checkbox" name="hobby" value="">打豆豆
    <hr>
    <p class="js">我不好</p>
    <hr>
    <ul id="abc">
        <li id="hah"></li>
        <li id="lis"></li>
        <li></li>
        <li></li>
        <li id="sb"></li>
    </ul>
    <div></div>


</body>

</html>